<template>
  <div>
    <myDivider name="设备管理"></myDivider>
    <div>
      <el-input class="findValue" v-model="query.deviceNum" placeholder="设备编码" @keyup.enter.native="queryDeviceList"
        clearable></el-input>
      <el-input class="findValue" v-model="query.deviceName" placeholder="设备名称" @keyup.enter.native="queryDeviceList"
        clearable></el-input>
      <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
        @click="queryDeviceList">搜索</el-button>
      <div class="operation">
        <el-button type="success" icon="el-icon-plus" @click="openForm">新增</el-button>
      </div>
    </div>
    <div>
      <el-table :data="deviceData" style="width: 100%" class="menuTable" row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->

        <el-table-column prop="serialNumber" label="编码">
        </el-table-column>

        <el-table-column prop="name" label="设备名称">
        </el-table-column>


        <el-table-column prop="positionName" label="位置">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.positionName" placement="top-start">
              <span>{{ scope.row.positionName == null || scope.row.positionName == '' ? '—' :
                scope.row.positionName.length > 8 ?
                  "..." + scope.row.positionName.substring(scope.row.positionName.length - 8,
                    scope.row.positionName.length) : scope.row.positionName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="stateName" label="状态">
        </el-table-column>

        <el-table-column prop="categoryName" label="类别">
        </el-table-column>

        <el-table-column prop="functionName" label="功能">
        </el-table-column>

        <el-table-column prop="costCenterName" label="成本中心">
        </el-table-column>

        <el-table-column prop="clName" label="关键性">
        </el-table-column>

        <el-table-column prop="supplierName" label="供应商">
        </el-table-column>

        <el-table-column prop="manufacturerName" label="制造商啊">
        </el-table-column>

        <el-table-column prop="model" label="型号">
        </el-table-column>

        <el-table-column prop="replaceableNumber" label="可替换编码">
        </el-table-column>

        <el-table-column label="操作" width="130px" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="echoValueForUpdate(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="confirmToDelete(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 分页器 -->
    <myPagination :total="totalSize" @PageChange="PageChange" @pageSizeChange="pageSizeChange"></myPagination>
    <!-- <div class="pageFooterFather">
      <el-pagination v-if="totalSize > pageSize" background layout="prev, pager, next" :total="totalSize"
        @current-change="handleCurrentChange" class="pageFooter">
      </el-pagination>
    </div> -->
  </div>
</template>

<style scoped>
.menuTable {
  margin-top: 100px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1300px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 22px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}
</style>



<script>
import {
  getDeviceList,
  deleteDevice,
} from "./device";
export default {
  data() {
    return {
      deviceData: [], //用户数据
      fatherDepmentManageData: [],
      query: {
        //左上角查询input
        deviceNum: "",
        devicename: "",
      },
      pageNum: 0,
      pageSize: 10,
      totalSize: 0,
    };
  },

  activated() {
    this.$set(this.query, 'deviceNum', '')
    this.$set(this.query, 'deviceName', '')
    //页面数据初始化
    getDeviceList().then((res) => {
      this.deviceData = res.list;
      this.pageNum = res.pageNum;
      this.pageSize = res.pageSize;
      this.totalSize = res.total;
    });

  },
  mounted: function () {
    //页面数据初始化
    this.queryDeviceList();


  },
  methods: {
    pageSizeChange(e) {
      this.pageSize = e
      this.queryDeviceList()
    },
    PageChange(e) {
      this.pageNum = e
      this.queryDeviceList()
    },
    //跳转新增设备页面
    openForm() {

      this.$router.push({ path: '/device/deviceInsert' });
    },
    //按条件查询设备列表
    queryDeviceList() {
      getDeviceList(
        this.query.deviceNum,
        this.query.deviceName,
        this.pageNum,
        this.pageSize
      ).then((res) => {
        this.deviceData = res.list;
        this.pageNum = res.pageNum;
        this.pageSize = res.pageSize;
        this.totalSize = res.total;
      });
    },

    deleteDeviceById(id) {


      //先去请求部门下是否有用户
      deleteDevice(id).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.queryDeviceList();
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      })
    },

    confirmToDelete(row) {

      var id = row.id;
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteDeviceById(id);
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.queryDeviceList();
    },

    echoValueForUpdate(row) {
      var id = row.id;
      this.$router.push({ path: '/device/deviceInsert', query: { id: id, operateType: 'update' } })
    }

  }
};
</script>